<template>
  <div>
    <a-spin :spinning="loading">
      <a-card :bordered="false" :bodyStyle="{ padding: '16px', height: '100%' }">
        <div class="table-page-search-wrapper">
          <a-form layout="inline">
            <a-row :gutter="48">
              <a-col :md="8" :sm="24">
                <a-form-item label="班级名称:">
                  <a-select placeholder="请选择班级" style="width: 80%" allowClear v-model="queryParam.class_id">
                    <a-select-option :value="item.id" v-for="(item, index) in classList" :key="index">{{
                      item.name
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="上课日期:">
                  <a-range-picker style="width: 80%" @change="changeDate" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="上课老师:">
                  <a-select placeholder="请选择老师" style="width: 80%" allowClear v-model="queryParam.teacher_id">
                    <a-select-option :value="item.id" v-for="(item, index) in teacherList" :key="index">{{
                      item.name
                    }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <!-- <template v-if="advanced">
              <a-col :md="8" :sm="24">
                <a-form-item label="学员姓名:">
                  <a-input style="width:80%;">
                    <a-tooltip slot="suffix" title="请输入学员姓名">
                      <a-icon type="search" style="color: rgba(0,0,0,.45)" />
                    </a-tooltip>
                  </a-input>
                </a-form-item>
              </a-col>
              </template>-->
            </a-row>
          </a-form>
        </div>

        <div class="table-operator">
          <!-- <span class="mar10">
            <a-button @click="gocommentrecord">点评记录</a-button>
          </span>-->
          <!-- <span class="mar10">
            <a-button>评语库</a-button>
          </span>-->
          <span class="mar10">
            <a-button @click="visibleSet = true">设置评分维度</a-button>
          </span>
        </div>
        <div style="margin-top: 16px">
          <s-table
            ref="table"
            :columns="columns"
            :data="loadData"
            class="user_management_table"
            :pagination="pagination"
          >
            <span slot="name" slot-scope="text">{{ text || '--' }}</span>
            <div slot="classtime" slot-scope="text, record">
              {{ record.attend_class_day }} {{ record.start_time }} - {{ record.end_time }}
            </div>
            <div slot="teacher" slot-scope="text, record">
              <span v-for="(item, index) in record.teachers" :key="index">
                <span>{{ item }}</span>
                <span v-if="index != record.teachers.length - 1">,</span>
              </span>
            </div>
            <div slot="action" slot-scope="text, record">
              <a @click="showDrawer(record.id, record.class.name)">查看</a>
            </div>
          </s-table>
        </div>

        <!-- 评价学员 -->
        <!--  :rules="rules" -->
        <a-modal
          title="评价学员"
          :width="720"
          :visible="record_visible"
          @ok="recorOK('recorForm')"
          :confirm-loading="recordconfirmLoading"
          @cancel="record_visible = false"
        >
          <a-form-model :model="recordform" :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }" ref="ruleForm">
            <div class="student container">
              <div class="user">
                <span style="width: 50px; height: 50px; border-radius: 50%">
                  <img :src="studentEvaluates.student.head_portrait.url" style="width: 100%; height: 100%" />
                </span>
                <span class="desc">
                  <div class="name">{{ studentEvaluates.student.name }}</div>
                  <div v-if="studentEvaluates.type == 1" class="text">到课</div>
                  <div v-if="studentEvaluates.type == 2" class="text">迟到</div>
                  <div v-if="studentEvaluates.type == 3" class="text">请假</div>
                  <div v-if="studentEvaluates.type == 4" class="text">未到</div>
                </span>
              </div>
              <div class="comment-content">
                <div class="t-flex">
                  <div class="item">
                    <span class="label">上课时间:</span>
                    <span
                      >{{ studentEvaluates.class_time.attend_class_day }} {{ studentEvaluates.class_time.start_time }} -
                      {{ studentEvaluates.class_time.end_time }}</span
                    >
                  </div>
                  <div class="item t-margin-l5">
                    <span class="label">上课教室:</span>
                    <span v-if="studentEvaluates.class_time.classroom">{{
                      studentEvaluates.class_time.classroom.name
                    }}</span>
                    <span v-else>未设置教室</span>
                  </div>
                </div>
                <div class="item">
                  <span class="label">上课老师:</span>
                  <span>{{ studentEvaluates.teacher_name }}</span>
                </div>
              </div>
            </div>

            <div class="comment-content" style="padding: 20px 0 0 60px">
              <div v-for="(val, i) in teacher_evaluate_score" :key="i">
                <span style="margin-right: 16px">{{ val.score_dim_name }}:</span>
                <span style="margin-right: 16px">
                  <a-rate :value="val.score" @change="scoreChage($event, i)" :disabled="false" />
                </span>
              </div>
            </div>
            <div class="t-padding-l2 t-margin-t3">
              <a-form-model-item label="评价内容:" prop="record_text" :wrapper-col="{ span: 13 }">
                <a-input type="textarea" v-model="record_text" />
              </a-form-model-item>
            </div>
            <a-form-model-item label=" " :colon="false">
              <div>
                <uploadimg @btnStartLoading="handlerup" @url="getimgurl"></uploadimg>
              </div>
              <div class="fileListArr" v-if="fileArr.length > 0">
                <div class="fileEachOne" v-for="(item, index) in fileArr" :key="index">
                  <img :src="item.img" alt v-if="item.img" />
                  <video id="hideAction" :src="item.mp4" controls="controls" v-if="item.mp4">
                    您的浏览器不支持 video 标签。
                  </video>
                  <a class="close_" @click="fileArr.splice(index, 1)">
                    <a-icon type="close" :style="{ fontSize: '16px' }" />
                  </a>
                </div>
              </div>
            </a-form-model-item>
          </a-form-model>
        </a-modal>

        <a-drawer
          title="课次评价详情"
          placement="right"
          :closable="true"
          :visible="visible"
          :after-visible-change="afterVisibleChange"
          @close="onClose"
          width="620"
        >
          <a-spin :spinning="loading">
            <div class="course-comment-detail">
              <div class="title">{{ allData.className }}</div>
              <div class="content">
                <p>
                  <span style="margin-right: 5px">上课时间:</span>
                  <span>{{ allData.attend_class_day }} {{ allData.start_time }} - {{ allData.end_time }}</span>
                </p>
                <p>
                  <span style="margin-right: 5px">上课老师:</span>
                  <span>{{ allData.teachers || '--' }}</span>
                </p>
                <p>
                  <span style="margin-right: 5px">上课教室:</span>
                  <span>{{ allData.classroom_name || '--' }}</span>
                </p>
                <p>
                  <span style="margin-right: 5px">所属课程:</span>
                  <span>{{ allData.course_name || '--' }}</span>
                </p>
                <p>
                  <span style="margin-right: 5px">点名时间:</span>
                  <span>{{ allData.created_at || '--' }}</span>
                </p>
                <p>
                  <span style="margin-right: 5px">点名老师:</span>
                  <span>{{ allData.project || '--' }}</span>
                </p>
              </div>
              <div class="title mb16">评价情况</div>
              <div style="margin-top: 16px">
                <a-table
                  :columns="columns1"
                  :data-source="loadData1"
                  class="user_management_table"
                  style="border: 1px solid #e8e8e8"
                  :pagination="false"
                >
                  <div slot="type" slot-scope="text, record">
                    <span v-if="record.type == 1">到课</span>
                    <span v-if="record.type == 2">迟到</span>
                    <span v-if="record.type == 3">请假</span>
                    <span v-if="record.type == 4">未到</span>
                  </div>
                  <div slot="evaluateNumber" slot-scope="text, record">
                    <span v-if="record.num != 0">{{ record.num }}条评价</span>
                    <span v-else style="color: rgb(255, 110, 110)">未评价</span>
                  </div>
                  <span slot="read_num" slot-scope="text, record">已读{{ record.read_num }}条</span>
                  <div slot="action" slot-scope="text, record">
                    <div class="t-flex-sb">
                      <a v-if="record.num != 0" @click="lookcomment(record.student_id, 1)">查看</a>
                      <span v-else>-</span>
                      <a @click="lookcomment(record.student_id, 2);record_type='add'" v-if="record.num == 0">评价</a>
                      <a @click="lookcomment(record.student_id, 3);record_type='edit'" v-else>修改</a>
                    </div>
                  </div>
                </a-table>
              </div>
            </div>

            <a-drawer
              title="评价详情"
              placement="right"
              :closable="true"
              :visible="comment_visible"
              :after-visible-change="afterVisibleChange"
              @close="comment_onClose"
              width="520"
            >
              <div>
                <div class="student container">
                  <div class="user">
                    <span style="width: 50px; height: 50px; border-radius: 50%">
                      <img :src="studentEvaluates.student.head_portrait.url" style="width: 100%; height: 100%" />
                    </span>
                    <span class="desc">
                      <div class="name">{{ studentEvaluates.student.name }}</div>
                      <div v-if="studentEvaluates.type == 1" class="text">到课</div>
                      <div v-if="studentEvaluates.type == 2" class="text">迟到</div>
                      <div v-if="studentEvaluates.type == 3" class="text">请假</div>
                      <div v-if="studentEvaluates.type == 4" class="text">未到</div>
                    </span>
                  </div>
                  <div class="comment-content">
                    <div class="item">
                      <span class="label">上课时间:</span>
                      <span
                        >{{ studentEvaluates.class_time.attend_class_day }}
                        {{ studentEvaluates.class_time.start_time }} - {{ studentEvaluates.class_time.end_time }}</span
                      >
                    </div>
                    <div class="item">
                      <span class="label">上课老师:</span>
                      <span>{{ studentEvaluates.teacher_name }}</span>
                    </div>
                    <div class="item">
                      <span class="label">上课教室:</span>
                      <span v-if="studentEvaluates.class_time.classroom">{{
                        studentEvaluates.class_time.classroom.name
                      }}</span>
                      <span v-else>未设置教室</span>
                    </div>
                    <div class="item">
                      <span class="label">上课内容:</span>
                      <span v-if="studentEvaluates.class_time.content">{{ studentEvaluates.class_time.content }}</span>
                      <span v-else>-</span>
                    </div>
                  </div>
                </div>
                <div class="teacher container" v-for="(item, index) in studentEvaluates.evaluate" :key="index">
                  <div class="user">
                    <span style="width: 50px; height: 50px; border-radius: 50%">
                      <img
                        :src="item.teacher.head_portrait.url"
                        v-if="item.teacher.head_portrait && item.teacher.head_portrait.url"
                        style="width: 100%; height: 100%; border-radius: 50%"
                      />
                      <img src="~@/assets/touxiang.svg" style="width: 100%; height: 100%; border-radius: 50%" v-else />
                    </span>
                    <span class="desc">
                      <div class="name">
                        {{ item.teacher.name }}
                        <span class="isread">{{ item.is_read == 1 ? '学员已读' : '学员未读' }}</span>
                      </div>
                      <div></div>
                    </span>
                  </div>

                  <div class="comment-content" style="padding: 20px 0 0 10px">
                    <div v-for="(val, i) in item.score" :key="i">
                      <!--  -->
                      <span style="margin-right: 16px">{{ val.score_dim_name }}:</span>
                      <span style="margin-right: 16px">
                        <a-rate :value="val.score" :disabled="true" />
                      </span>
                    </div>
                  </div>
                  <div style="padding: 20px 10px">
                    <div v-for="(c, j) in item.comment" :key="j">
                      <div v-if="c.type == 'text'" class="mr" :title="c.content">{{ c.content }}</div>
                      <div v-if="c.type == 'picture'" class="mr">
                        <img :src="c.content" style="height: 200px; width: 70%" @click="openPicture(c.content)" />
                      </div>
                      <div v-if="c.type == 'video'" class="mr">
                        <video :src="c.content" style="height: 200px; width: 70%" controls />
                      </div>
                    </div>
                  </div>
                  <div class="comment-main" :style="item.interaction.length > 0 ? '' : 'margin-top:220px'">
                    <div class="comment-body" v-if="item.interaction.length > 0">
                      <div class="huifubox">
                        <a-row class="huifu-content" v-for="(z, x) in item.interaction" :key="x">
                          <a-col :span="3">
                            <img
                              v-if="!z.from.avatar"
                              src="~@/assets/touxiang.svg"
                              style="height: 40px; border-radius: 50%"
                            />

                            <img
                              :src="z.from.avatar.url"
                              style="height: 40px; border-radius: 50%"
                              v-else-if="z.from.avatar && z.from.avatar.url"
                            />
                            <img v-else :src="z.from.avatar" style="height: 40px; border-radius: 50%" />
                          </a-col>
                          <a-col :span="20">
                            <div>{{ z.from.name }}</div>
                            <div style="color: rgb(153, 153, 153); font-size: 12px">
                              <span>{{ z.created_at }}</span>
                              <span
                                style="color: #1890ff; margin-left: 10px; font-weight: 300; cursor: pointer"
                                v-if="z.is_mine == 1"
                              >
                                <a-popconfirm
                                  title="确定删除吗?"
                                  ok-text="确定"
                                  cancel-text="取消"
                                  @confirm="clickDelte(z.id)"
                                  placement="bottom"
                                  >删除</a-popconfirm
                                >
                              </span>
                              <span
                                style="color: #1890ff; margin-left: 10px; font-weight: 300; cursor: pointer"
                                v-if="z.is_mine == 2"
                                @click="replyComment(z)"
                                >回复</span
                              >
                            </div>
                            <div style="margin-top: 5px">
                              <span v-if="z.to instanceof Array"></span>
                              <span v-else>
                                回复
                                <span style="color: #13c2c2; margin: 0 5px">{{ z.to.name }}</span
                                >：
                              </span>
                              <span>{{ z.comment }}</span>
                            </div>
                          </a-col>
                        </a-row>
                      </div>
                    </div>
                    <div style="padding: 13px 0px">
                      <a-textarea
                        :placeholder="replyman ? '回复' + replyman.from.name : '输入评论类容，200字以内'"
                        :rows="2"
                        v-model="commentContent[index]"
                      />
                    </div>
                    <div>
                      <div style="display: flex">
                        <a-button
                          type="primary"
                          @click="replyman ? addReply(item.id, index) : sendComment(item.id, index)"
                          style="margin-right: 10px"
                          >发送</a-button
                        >
                        <a-button @click="cancelComment" v-if="replyman">取消</a-button>
                        <!-- <div></div> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a-drawer>
          </a-spin>
        </a-drawer>
        <!-- 学员评价 -->

        <!-- 放大图片 -->
        <a-modal title="查看图片" :visible="pictureVisible" @cancel="pictureCancel" :footer="null" :width="700">
          <div style="height: 500px; overflow: auto; padding: 10px 20px">
            <img :src="bigImg" style="width: 100%; height: auto" />
          </div>
        </a-modal>
        <!-- 设置评分 -->
        <a-modal title="学员评分设置" :visible="visibleSet" @cancel="handleCancel" :width="839" :footer="null">
          <a-row>
            <a-col :span="10">
              <img src="~@/assets/img/setscore.png" alt style="width: 338px; margin-right: 35px" />
              <p style="text-align: center; margin-top: 16px; margin-right: 35px">预览效果</p>
            </a-col>
            <a-col :span="12">
              <div style="min-height: 400px; max-width: 800px; padding-left: 30px; padding-top: 15px">
                <div class="setting-header">
                  <a-button
                    type="primary"
                    @click="dataScoreAddNewLine()"
                    :disabled="dataScore.length >= 6 || addDataScoreType"
                    >添加</a-button
                  >
                </div>
                <div>
                  <a-alert message="最多添加6个学员评分维度" type="info" show-icon />
                </div>
                <div style="margin-top: 15px">
                  <a-table :data-source="dataScore" :columns="columnsScore" :pagination="false" :showHeader="false">
                    <div slot="evaluateinput" slot-scope="text, record">
                      <span v-if="record.id">{{ record.name }}</span>
                      <span v-else>
                        <input type="text" v-model="record.name" class="antput" />
                      </span>
                    </div>
                    <div slot="action" slot-scope="text, record, index">
                      <a title="保存">
                        <a-icon
                          type="save"
                          v-if="!record.id"
                          style="margin-right: 10px"
                          @click="addDataScore(record.name)"
                        />
                      </a>
                      <a>
                        <a-icon type="delete" v-if="record.id" @click="delteDimension(record.id)" />
                      </a>
                      <a>
                        <a-icon type="delete" v-if="!record.id" @click="dataScore.splice(index, 1)"></a-icon>
                      </a>
                    </div>
                  </a-table>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-modal>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { STable } from '@/components'
import {
  studentCommentList,
  evaluatesDetails,
  scoreDimension,
  deletescoreDimension,
  createDataScore,
  studentevaluates,
  lookComments,
  deleteComment,
  evaluatesCreate,
  evaluatesInfo,
  evaluatesEdit,
} from '@/api/afterClassComment'
import { teacherList } from '@/api/teacher'
import { classList } from '@/api/class'
import uploadimg from '@/components/uploadIMG_AVI'
export default {
  name: 'studentCommentList',
  components: {
    STable,
    uploadimg,
  },
  data() {
    return {
      recordconfirmLoading:false,
      evaluate_id:0,
      record_type:'add',
      record_visible: false,
      recordform: { content: { text: '' } },
      record_text: '',
      fileArr: [],
      comment: [],
      teacher_evaluate_score: [],

      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
      pictureVisible: false,
      bigImg: '',
      //学员评价
      commentContent: {},
      rateValue: 5,
      comment_visible: false,
      classwidth: '520',
      record_id: undefined,
      replyman: null,
      studentEvaluates: {
        student: {
          head_portrait: {},
        },
        class_time: { attend_class_day: null, classroom: { name: undefined } },
      },
      //   advanced: false
      loading: false,
      visibleSet: false,
      confirmLoading: false,
      //搜索
      teacherList: undefined,
      classList: undefined,
      columns: [
        {
          title: '班级名称',
          dataIndex: 'class.name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '上课时间',
          scopedSlots: { customRender: 'classtime' },
        },
        {
          title: '上课老师',
          scopedSlots: { customRender: 'teacher' },
        },
        {
          title: '点评情况',
          dataIndex: 'comment_number',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
        },
      ],

      queryParam: {
        school_id: this.$store.state.user.school,
        start_time: undefined,
        end_time: undefined,
      },
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        return studentCommentList(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      //抽屉a-drawer
      visible: false,
      allData: {},
      columns1: [
        {
          title: '学员姓名',
          dataIndex: 'student_name',
          width: 100,
          ellipsis: true,
        },
        {
          title: '到课状态',
          scopedSlots: { customRender: 'type' },
        },
        {
          title: '评价数',
          scopedSlots: { customRender: 'evaluateNumber' },
        },
        {
          title: '已读评价数',
          dataIndex: 'read_num',
          scopedSlots: { customRender: 'read_num' },
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          width: 100,
        },
      ],
      loadData1: [],
      //评分维度
      columnsScore: [
        {
          title: '输入',

          scopedSlots: { customRender: 'evaluateinput' },
        },
        {
          title: '操作',
          align: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      dataScore: [],
      addDataScoreType: false,
    }
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh()
      },
      //immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: false,
      deep: true, // 开启深度监听，默认是false
    },
    visibleSet(val) {
      if (val == true) {
        this.getScore()
      }
    },
  },
  created() {
    this.getTeacher()
    this.getClass()
    this.getScore()
  },
  methods: {
    scoreChage(e, index) {
      this.teacher_evaluate_score[index].score = e
    },
    recorOK() {
      this.recordconfirmLoading=true
      this.arrangementData()
      for (let i = 0; i < this.teacher_evaluate_score.length; i++) {
        if (this.teacher_evaluate_score[i].score == 0) {
          this.$message.warning('评价最低为一星哦！')
          return
        }
      }
      if (this.comment == '') {
        this.$message.warning('内容不能为空！')
        return
      }
      console.log(this.comment)
      //eturn
      if(this.record_type=='add'){
        evaluatesCreate(
         {
           school_id: this.$store.state.user.school,
           record_id: this.record_id,
				   student_id: this.studentEvaluates.student.id,
			     score_arr: this.teacher_evaluate_score,
			   	 comment: this.comment
         }
       )
          .then((res) => {
            this.recordconfirmLoading=false
            this.$message.success('修改成功')
            this.record_visible=false
            this.showDrawer(this.record_id,this.allData.className)
            
          })
          .catch((err) => {
            this.recordconfirmLoading=false
            this.$message.error(err.data.message || '评价失败')
          })
      }else{
        evaluatesEdit(this.evaluate_id,
         {
           school_id: this.$store.state.user.school,
           record_id: this.record_id,
				   student_id: this.studentEvaluates.student.id,
			     score_arr: this.teacher_evaluate_score,
			   	 comment: this.comment
         }
       )
          .then((res) => {
            this.recordconfirmLoading=false
            this.$message.success('评价成功')
            this.record_visible=false
            this.showDrawer(this.record_id,this.allData.className)
            
          })
          .catch((err) => {
            this.recordconfirmLoading=false
            this.$message.error(err.data.message || '评价失败')
          })
      }
       
    },
    arrangementData() {
      this.comment = []
      var reg = /\.(png|jpg|jpeg|gif)$/
      var imgurl = ''
      var mp4url = ''
      if (this.record_text != '') {
        this.comment.push({
          type: 'text',
          content: this.record_text,
        })
      }
      this.fileArr.forEach((el) => {
        if (el.img) {
          this.comment.push({
            type: 'picture',
            content: el.img,
          })
        } else {
          this.comment.push({
            type: 'video',
            content: el.mp4,
          })
        }
      })
    },
    //上传图片
    handlerup(e) {},
    getimgurl(e, type) {
      let arr = ['video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb', 'video/mov', 'video/mp4']
      if (arr.indexOf(type) !== -1) {
        this.fileArr.push({
          mp4: e,
          explain: '',
        })
        this.btnLoading = false
      } else {
        this.fileArr.push({
          img: e,
          explain: '',
        })
        this.btnLoading = false
      }
    },
    addDataScore(data) {
      if (data) {
        createDataScore({
          name: data,
          school_id: this.$store.state.user.school,
        })
          .then((res) => {
            this.$message.success('添加评分维度成功')
            this.addDataScoreType = false
            this.getScore()
          })
          .catch((err) => {
            this.$message.error(err.data.message || '添加评分维度失败')
          })
      } else {
        this.$message.warning('请输入评分维度名称')
      }
    },
    dataScoreAddNewLine() {
      this.dataScore.push({ name: '' })
      this.addDataScoreType = true
    },
    //获取列表
    getScore() {
      scoreDimension({ school_id: this.$store.state.user.school })
        .then((res) => {
          this.dataScore = res.data
        })
        .catch((err) => {
          // this.$message.error(err.data.message||'评分维度获取失败')
        })
    },

    //删除评分维度
    delteDimension(id) {
      let that = this
      that.$confirm({
        title: '删除学员评分维度',
        content: '删除后对已有评价记录无影响',
        okText: '确认',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          deletescoreDimension(id)
            .then((res) => {
              that.getScore()
              that.$message.success('删除成功')
            })
            .catch((err) => {
              that.$message.error('删除失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
    //搜索  老师列表
    getTeacher() {
      teacherList({ school_id: this.$store.state.user.school, pageSize: 99999999 })
        .then((res) => {
          this.teacherList = res.data
        })
        .catch((err) => {
          this.$message.error(err.data.message || '上课老师获取失败')
        })
    },
    getClass() {
      classList({ school_id: this.$store.state.user.school, pageSize: 99999999 })
        .then((res) => {
          this.classList = res.data
        })
        .catch((err) => {
          this.$message.error(err.data.message || '班级获取失败')
        })
    },
    changeDate(date, dateString) {
      this.queryParam.start_time = dateString[0]
      this.queryParam.end_time = dateString[1]
    },
    //表格
    afterVisibleChange(val) {},
    showDrawer(id, className) {
      this.loading = true
      evaluatesDetails(id, { include: 'evaluate' })
        .then((res) => {
          this.allData = JSON.parse(JSON.stringify(res))
          this.allData.className = className
          this.loadData1 = res.evaluate
          this.visible = true
          this.record_id = res.id
        })
        .finally(() => {
          this.loading = false
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取详情数据失败')
        })
    },
    onClose() {
      this.visible = false
    },
    //去点评记录
    gocommentrecord() {
      this.$router.push({
        name: 'student_comment_record',
      })
    },
    //设置评分

    handleCancel(e) {
      this.visibleSet = false
    },
    lookcomment(id, type) {
      this.recordconfirmLoading=false
      if(type==1){
         this.getStudentEvaluate(id, type)
      }
      if (type == 2) {
        this.record_text=''
        this.fileArr=[]
        this.comment=[]
        this.getStudentEvaluate(id, type)
        scoreDimension({ school_id: this.$store.state.user.school })
          .then((res) => {
            this.dataScore = res.data
            this.teacher_evaluate_score = []
            this.dataScore.forEach((item, i) => {
              this.teacher_evaluate_score.push({
                score_dim_name: item.name,
                score: 0,
              })
            })
            this.$forceUpdate()
          })
          .catch((err) => {
            // this.$message.error(err.data.message||'评分维度获取失败')
          })
      }
      if (type == 3) {
        this.record_text=''
        this.fileArr=[]
        this.comment=[]
        this.teacher_evaluate_score=[]
        studentevaluates({ student_id: id, record_id: this.record_id })
        .then((res) => {
            console.log(res)
            this.studentEvaluates = res
            this.record_visible = true
            res.evaluate[0].comment.forEach(val=>{
              if(val.type=='text'){
                this.record_text=val.content
              }
              if(val.type=='picture'){
                this.fileArr.push({img:val.content})
              }
              if(val.type=='video'){
                this.fileArr.push({img:val.mp4})
              }
            })
            this.evaluate_id=res.evaluate[0].id
            this.teacher_evaluate_score
            res.evaluate[0].score.forEach(val=>{
              this.teacher_evaluate_score.push({
                score_dim_name: val.score_dim_name,
                score: val.score,
              })
            })
        })
        .finally(() => {
        })
        .catch((err) => {
          this.$message.error(err.data.message || '评价详情获取失败')
        })
      }
    },
    //查看学员评价
    getStudentEvaluate(id, type) {
      this.loading = true
      studentevaluates({ student_id: id, record_id: this.record_id })
        .then((res) => {
          this.studentEvaluates = res
          if (type == 1) {
            this.comment_visible = true
          } else {
            this.record_visible = true
          }
          this.classwidth = '720'
        })
        .finally(() => {
          this.loading = false
        })
        .catch((err) => {
          this.$message.error(err.data.message || '评价详情获取失败')
        })
    },

    comment_onClose() {
      this.comment_visible = false
      this.classwidth = '520'
    },
    submitComment(project_id, index) {
      this.loading = true
      lookComments({
        school_id: this.$store.state.user.school,
        project_id: project_id,
        project_type: 2,
        comment: this.commentContent[index],
      })
        .then((res) => {
          this.getStudentEvaluate(this.studentEvaluates.student.id)
          this.$message.success('评论成功')
        })
        .catch((err) => {
          this.$message.error(err.data.message || '评论失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
    sendComment(project_id, index) {
      this.submitComment(project_id, index)
      this.commentContent[index] = null
    },
    //删除评论
    submitDelComment(id) {
      deleteComment(id)
        .then((res) => {
          this.$message.success('删除成功')
          this.getStudentEvaluate(this.studentEvaluates.student.id)
        })
        .catch((err) => {
          this.$message.error(err.data.message || '删除失败,请重试')
        })
    },
    clickDelte(id) {
      this.submitDelComment(id)
    },
    pictureCancel() {
      this.pictureVisible = false
    },
    openPicture(imgurl) {
      this.bigImg = imgurl
      this.pictureVisible = true
    },
    replyComment(e) {
      this.replyman = e
    },
    cancelComment() {
      this.replyman = null
    },

    addReply(project_id, index) {
      this.loading = false
      lookComments({
        school_id: this.$store.state.user.school,
        project_id: project_id,
        project_type: 2,
        comment: this.commentContent[index],
        to_id: this.replyman.from.id,
        to_type: this.replyman.from.user_type,
      })
        .then((res) => {
          this.getStudentEvaluate(this.studentEvaluates.student.id)
          this.$message.success('回复成功')
          this.commentContent[index] = null
          this.replyman = null
        })
        .catch((err) => {
          this.$message.error(err.data.message || '回复失败')
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="less" scoped>
.mar10 {
  margin-right: 10px;
}
.title {
  font-size: 16px;
  font-weight: 700;
  color: rgb(51, 51, 51);
}
.content {
  padding-top: 20px;
  padding-left: 40px;
  padding-bottom: 30px;
  font-size: 14px;
}
// #moreButton {
//   position: absolute;
//   top: 34px;
//   right: 20px;
// }
.setting-header {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.antput {
  border: none;
  outline: none;
  // border-bottom: 1px solid #ffab1a !important;
  width: 260px;
  border-radius: 0;
}
// .antput:focus {
//   border: none;
//   // border-bottom: 1px solid #ffab1a !important;
//   background-color: #fff !important;
//   box-shadow: none;
// }
.antput:focus {
  border: none;
  // border-bottom: 1px solid #ffab1a !important;
  // background-color: #fff !important;
  box-shadow: none;
}
.footaction {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.student {
  padding: 0 0 24px 0;
  border-bottom: 1px solid #e8e8e8;
  .user {
    display: flex;
    align-items: center;
    .desc {
      margin-left: 10px;
      .name {
        font-size: 15px;
        color: #333;
      }
      .text {
        font-size: 13px;
        color: #999;
      }
    }
  }
  .comment-content {
    padding: 20px 0 0 60px;
    .item {
      span {
        color: #666;
      }
      .label {
        margin-right: 16px;
      }
    }
    .item:not(:last-child) {
      margin-bottom: 12px;
    }
  }
}

.teacher {
  padding: 24px 0;
  .user {
    display: flex;
    .desc {
      margin-left: 10px;
      .name {
        font-size: 15px;
        color: #333;
        .isread {
          color: #ec4b35;
          margin-left: 16px;
          border: 1px solid #ec4b35;
          padding: 1px 6px;
          font-size: 10px;
        }
      }
      .text {
        font-size: 13px;
        color: #999;
      }
    }
  }
  .comment-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 20px 0 0 60px;
  }
  .comment-main {
    background: #f7f8f9;
    padding: 10px;
    .comment-body {
      height: 220px;
      overflow-y: auto;
      .huifubox {
        .huifu-content {
          margin-bottom: 20px;
        }
      }
    }
  }
}
.mr {
  margin: 10px 0 0 0;
}
.fileListArr {
  display: flex;
  flex-wrap: wrap;
  // border: 1px dashed #e8e8e8;
  // padding: 10px 10px 0;
  .fileEachOne {
    margin-right: 12px;
    margin-bottom: 15px;
    padding: 10px 10px 5px 0px;
    width: 122px;
    height: 122px;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
    .close_ {
      position: absolute;
      right: 0px;
      top: -8px;
      display: none;
    }
    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 4px;
    }
  }
  .fileEachOne:hover {
    .close_ {
      display: block;
    }
  }
}
</style>